<template>
<el-dialog :title="$t('home.user.login.editPwdDialog.title')" :visible.sync="pageVisible" :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="editUserPwdForm" :model="editUserPwdForm" :rules="editUserPwdFormRules" label-width="150px" style="margin:10px;min-width:400px;">
        <el-form-item :label="$t('home.user.login.editPwdDialog.form.oldPwd')" prop="oldPwd">
            <el-input v-model="editUserPwdForm.oldPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('home.user.login.editPwdDialog.form.newPwd')" prop="newPwd">
            <el-input v-model="editUserPwdForm.newPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('home.user.login.editPwdDialog.form.okNewPwd')" prop="okPwd">
            <el-input v-model="editUserPwdForm.okPwd" type="password"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeFrom('editUserPwdForm')">{{$t('home.user.login.editPwdDialog.dialogCancel')}}</el-button>
        <el-button type="primary" @click.native="editUserPwdSubmit()" :loading="editLoading">{{$t('home.user.login.editPwdDialog.dialogOk')}}</el-button>
    </div>
</el-dialog>
</template>

<script>
import {
    resetPwd
} from '../api/api';
export default {
    data() {
        //自定义二次密码校验器
        var validPwdSame = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.editUserPwdForm.newPwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            editLoading: false,
            pageVisible: false,
            editUserPwdForm: {
                oldPwd: '',
                newPwd: '',
                okPwd: ''
            },
            editUserPwdFormRules: {
                oldPwd: [{
                    required: true,
                    message: '请输入旧密码',
                    trigger: 'blur'
                }],
                newPwd: [{
                    required: true,
                    min: 6,
                    message: '请输入新密码(至少6个字符)',
                    trigger: 'blur'
                }],
                okPwd: [{
                    validator: validPwdSame,
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        editUserPwdSubmit() {
            this.$refs.editUserPwdForm.validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.editUserPwdForm);
                    resetPwd(para).then(res => {
                        let {
                            msg,
                            code
                        } = res;
                        if (code !== "0") {
                            this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            this.pageVisible = false;
                        }
                    });
                }
            });
        },
        showPage() {
            this.pageVisible = true;
        },
        // 对话框取消事件
        closeFrom(formName) {
            this.pageVisible = false;
            // 点击取消 数据重置
            this.$refs[formName].resetFields();
        },
        // 对话框关闭事件
        closeDialog() {
            // 点击关闭 数据重置
            this.$refs['editUserPwdForm'].resetFields();
        }
    }
}
</script>
